<template>
    <!-- Comp/collectbar/collectbar.wxml -->
    <view class="bar">
        <view @tap="onBarItemTap" :data-index="index" :class="activeIndex === index ? 'active' : ''" v-for="(item, index) in [0, 1, 2, 3]" :key="index">
            {{ ['商品收藏', '品牌收藏', '店铺收藏', '浏览足迹'][index] }}
        </view>
    </view>
</template>

<script>
// Comp/collectbar/collectbar.js
export default {
    data() {
        return {
            activeIndex: 0
        };
    },
    methods: {
        onBarItemTap: function (e) {
            const index = e.currentTarget.dataset.index;
            this.setData({
                activeIndex: index
            });
        }
    },
    created: function () {}
};
</script>
<style>
/* Comp/collectbar/collectbar.wxss */
.bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 80rpx;
    background-color: white;
    border-bottom: 2rpx solid grey;
}

.bar view {
    line-height: 80rpx;
    cursor: pointer;
    height: 80rpx;
}

.bar view.active {
    color: red;
    border-bottom: 2rpx solid red;
}
</style>
